<template>
    <div>
<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="forminfo.username"
      name="用户名"
      label="账号"
      placeholder="用户名"
      :rules="[{ pattern, message: '请填写手机号' }]"
    />
    <van-field
      v-model="forminfo.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ pattern, message: '请填写密码' }]"
    />
    <van-field
      v-model="forminfo.passwordok"
      type="passwordok"
      name="密码"
      label="确认密码"
      placeholder="确认密码"
      :rules="[{ validator, message: '请再次输入密码' }]"
    />
    
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      注册
    </van-button>
  </div>
</van-form>

    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {registerApi} from '../request/api'
import { showToast } from 'vant';
import {useRouter} from 'vue-router'
const router=new useRouter()
const forminfo=reactive({
    username:'',
    password:'',
    passwordok:''
})
//正则验证
const pattern=/^[a-zA-Z0-9]{8,16}$/
const validator=(val)=>{
    if(val!=forminfo.password){
        return false
    }else{
        return true
    }
}
const onSubmit=()=>{
    registerApi(forminfo.password,forminfo.password).then(res=>{
        if(res.data.code==0){
            showToast({
                type:'success',
                message:'注册成功',
                duration:1500,
                onClose(){
                    router.push('/login')
                }
            })
        }
    })
}
</script>

<style lang="scss" scoped>

</style>